<template>
    <el-popover :visible="viewData.visible" placement="bottom" :width="350">
        <el-tabs v-model="viewData.activeName" type="border-card">
            <el-tab-pane v-for="item in viewData.type" :label="item" :name="item">
                <el-empty v-if="viewData.results.length === 0"></el-empty>
                <template v-else>
                    <el-scrollbar height="300px">
                        <ul class="icon-ul">
                            <li @click="select(index)" v-for="index in viewData.results">
                                <Icon :name="index"></Icon>
                            </li>
                        </ul>
                    </el-scrollbar>
                </template>
            </el-tab-pane>
        </el-tabs>

        <template #reference>
            <el-input
                v-model="viewData.icon"
                @focus="viewData.visible = true"
                @blur="viewData.visible = false"
                clearable
            >
                <template #prepend>
                    <Icon :name="viewData.icon" v-if="viewData.icon !== ''" />
                </template>
            </el-input>
        </template>
    </el-popover>
</template>

<script lang="ts" setup>
import { reactive, watch, watchEffect } from 'vue'
import Icon, { getElementIcons } from './index'

const props = withDefaults(defineProps<{ modelValue?: string }>(), {
    modelValue: '',
})

const emits = defineEmits(['update:modelValue'])

const viewData = reactive({
    icon: props.modelValue,
    visible: false,
    type: ['Ele'],
    activeName: 'Ele',
    results: [],
})

watch(
    () => props.modelValue,
    () => {
        viewData.icon = props.modelValue
        console.log(props.modelValue)
    },
)

watchEffect(async () => {
    switch (viewData.activeName) {
        case 'Ele':
            viewData.results = (await getElementIcons()) as any
            break
        case 'Awe':
        case 'Local':
        default:
            viewData.results = []
    }
})

const select = (index: string) => {
    viewData.icon = index
    emits('update:modelValue', index)
}
</script>

<style scoped lang="scss">
.icon-ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding-left: 0;
    li {
        $height: 40px;
        width: 20%;
        list-style: none;
        height: $height;
        line-height: $height;
        cursor: pointer;
        text-align: center;
        &:hover {
            border: 1px solid #40a4f2;
            width: calc(20% - 2px);
            height: $height - 2px;
        }
    }
}
.icon-btn {
    text-align: right;
    margin-top: 10px;
}
</style>
